<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>打字游戏</title>
<style>
*{
  box-sizing: border-box;
}
.container{
  width:1200px;
  margin:0 auto;
}
.center{
  text-align: center;
}
.bg{
  position: relative;
  width:1200px;
  height:700px;
  border:1px solid #ddd;
  border-bottom:1px solid red;
}
.wall{
  width:100%;
  height:200px;
  border:1px solid #ddd;
}
.item{
  width:40px;
  height:40px;
  border:1px solid #ddd;
  position:absolute;
  background:greenyellow;
  color:white;
  text-align: center;
  line-height: 40px;
  font-size: 20px;
}
.move{
  background:orange;
}
.floor{
  width:100%;
  height:1px;
  background:red;
  margin-top:500px;
}
.msg{
  color:red;
}
.key-img img{
    width:80%;
    margin:.5rem 10%;
    opacity: .3;
}
</style>
</head>
<body>
<div class="container" id="app">
  <h2 class="center">指法练习</h2>
   <div class="re">
	   <label>
		   时间间隔：
			<input type="text" placeholder="单位：毫秒" v-model="time_len">
	   </label>

     <button @click="start">开始</button>
     <button @click="show_keyboard=!show_keyboard">{{show_keyboard?'隐藏':'显示'}}键盘</button>
     <!-- <button @click="stop">暂停</button> -->
     <span>得分：</span><span>{{fen}}</span>
	 <span class="msg">{{msg}}</span>
   </div>
   <div class="bg">
      <div class="wall">
        <div class="item" v-for="v in list" :style="{'top':v.top,'left':v.left}" :class="{move:v.move}" v-if="!v.die">{{v.text}}</div>
      </div>
      <div class="key-img" v-show="show_keyboard">
          <img src="./static/img/keyboard.jpg" alt="键盘">
      </div>
   </div>
   
</div>
</body>
</html>
<script src="./static/js/vue.min.js"></script>
<script>
// item:left,top,text, die,move
new Vue({
  el:"#app",
  data:{
    fen:0,
    status:0,//0 停止，1 进行中
    list:[],
    left:[],//没有移动的index
    timer:0,
    show_keyboard:false,
    time_len:400,
    gameover:false,
    kill_len:0,
	  msg:"",
  },
  created(){
     this.init();
     window.document.addEventListener("keydown",e=>{
       this.kill(e);
     })
  },
  methods:{
      start(){
        this.gameover=false;
        this.fen=0;
        if(this.status==0){
            this.run();
            this.status=1;
        }else{
            this.init();
            this.run();
        }
      },
      init(){
         this.list=[];
         this.left=[];
         this.kill_len=0;
         for(var i=0;i<150;i++){
           this.list.push({
              left:(i%30)*40+"px",
              top:Math.floor(i/30)*40+"px",
              text:this.text(),
              die:false,
              move:false,
           })
           this.left.push(i);
         }
         this.status=1;
      },
      run(){
          clearInterval(this.timer);
            this.timer=setInterval(()=>{
                this.move();
            },this.time_len)
      },
      // stop(){
      //     console.log("list",this.list,'left',this.left)
      //     clearInterval(this.timer);
      // },
      next_step(){
        this.time_len-=100;
        this.init();
        this.run();
      },
      get_one(){
        if(this.left.length<1) return;
        while(true){
            var i=this.rand(0,this.left.length-1);
            var index=this.left[i];
            if(index>=120 || parseInt(this.list[index+30].top) - parseInt(this.list[index].top) >40){
                this.list[index].move=true;//有时会有this.list[index]不存在的问题
                this.left.splice(i,1);
                break;
            }else{
                console.log("index",i,index)
            }
        }
        console.log("succ",index)
      },
      move(){
         this.get_one();
         this.list.forEach(v=>{
            if(v.move && !v.die){
                v.top=parseInt(v.top)+40+"px";
                if(parseInt(v.top)>700){
                    clearInterval(this.timer);
                    this.msg="游戏结束";
                    this.gameover=true;
                }
            }
         })
      },
      kill(e){
         if( this.gameover) return;
         var key=e.key.toUpperCase();
         var item=false;
         for(var i=0,len=this.list.length;i<len;i++){
            var v =this.list[i];
            if(v.move && v.die==false && v.text==key){
                if(!item || v.top>item.top){
					item=v;
                }
            }
         }
         if(item){
            item.die=true;
            this.fen+=1;
            this.kill_len++;
         }
         if(this.left.length<1 && this.kill_len==this.list.length){
            this.next_step();
         }
      },
      rand(min,max){
          if(min==max) return min;
          return Math.round(Math.random()*(max-min)+min);
      },
      text(){
          //65-90
          return String.fromCharCode(this.rand(65,90));
      },
  }
})
</script>